function Banner(props) {
  let { list, index, onInitIndex } = props;
  list = list.concat({ ...list[0], id: 88 })
  let sty = {
    // transform: `translateX(${-index * 500}px)`,
    // transition: 'all 0.3s',
    width: list.length * 500 + 'px'
  }
  if (index >= list.length) {
    Object.assign(sty, {
      transform: `translateX(${0}px)`,
    })
    //让闪到第一张的DOM渲染完成之后 才可以往第二张运动
    setTimeout(() => {
      onInitIndex(1)
    }, 20)
  } else if (index <= -1) {
    // 闪到最后一张 渲染完成之后 在向倒数第二张运动
    Object.assign(sty, {
      transform: `translateX(${-(list.length - 1) * 500}px)`,
    })
    setTimeout(() => {
      onInitIndex(list.length - 2)
    }, 20);
  } else {
    Object.assign(sty, {
      transform: `translateX(${-index * 500}px)`,
      transition: 'all 0.3s',
    })
  }
  return <ul className='banner_box' style={sty}>
    {
      list.map(item => {
        return <li key={item.id}>{item.text}</li>
      })
    }
  </ul>
}

export default Banner